@import "base";

body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content{
  box-sizing:border-box;
  width: 40vw;
  height: 40vw;
  border-radius: 2vw;
  padding: 20px;
  font: 2em/2.1em Georgia;
  color:#fff;
  border: 1px solid #fff;

  .letter{
    position: relative;
    display: inline-block;
    white-space: pre-wrap;
    opacity: 0;
    transform:translateY(-10px) scale(0);
    animation:moveY 1.5s ease-out 1;
    animation-fill-mode: forwards;
    &:first-child{
      margin-left: 2em;
    }
    &::after{
      content: '';
      position:absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom:none;
      transform: rotate3d(1,0,0,0);
      animation:show 1.5s linear 1;
      animation-fill-mode: forwards;

    }
  }
}



@keyframes moveY{
  0%{transform:translateY(-20px) scale(0);opacity: 0;}
  50%{transform:translateY(30px) scale(.5);opacity: .5;}
  100%{transform:translateY(0) scale(1);opacity: 1;}
}
@keyframes show{
  0%{transform:rotate3d(1,0,0,0);opacity: 0;border-bottom:none;}
  50%{transform:rotate3d(1,0,.5,0);opacity: .5;border-bottom:none;}
  100%{transform:rotate3d(0,0,1,0);opacity: 1;border-bottom:1px solid #fff;}
}